<template>
  <div>
    <!-- 头部 -->
     
    <home-header />
    <!-- 头部结束 -->
  
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="banner in banners" :key="banner.id">
        <img :src="banner.picUrl" alt="" />
      </van-swipe-item>
      
    </van-swipe>
    <!-- 轮播结束 -->
    <!-- 宫格导航 -->
    
    <van-grid column-num="4" clickable
      ><!-- clickable 高亮类 点击显示背影 -->
      <van-grid-item
        v-for="cate in cates"
        :key="cate.id"
        :icon="cate.icon"
        :to="{
          path: '/itemLists',
          query: {
            cateId: cate.id,
          },
        }"
        :text="cate.name"
      />
    </van-grid>
    <!-- 宫格导航结束 -->
    <!-- 京东秒杀 -->

    <seckill :SeckillGoods="SeckillGoods" :endTime="endTime" />
    <!-- 京东秒杀结束 -->
    <!-- 推荐商品 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="讨厌,人家已经到底讷QAQ"
        :offset="50"
        @load="onLoad"
      >
        <items @clickItem="enterDetail" @addCart="addCart" :items="items" />
        <!-- 监听detail点击事件 -->
      </van-list>
    </van-pull-refresh>
    <!-- 这里绑定一下可以用items的数据了 -->
    <!-- tabbar -->
    <mtabbar />
  </div>
</template>

<script>
// 公共组件
import Mtabbar from "_components/Mtabbar";
// 网络请求
import { fetchCates, fetchBanner, fetchItems, addCart ,fetchCartInfo } from "_api";
// 子组件
import HomeHeader from "./components/HomeHeader.vue";
import Items from "./components/Items";
import Seckill from "./components/Seckill.vue";
//工具
import { isLogin, getToken } from "_utils";
import { Toast } from "vant";


export default {
  data() {
    return {
      cates: [],
      banners: [],
      items: [], // 首页推荐商品数据
      // 首页楼层分页数据
      page: 1,
      pageSize: 4,
      // 上拉是否处于加载状态 触底事件触发时自动变成true
      loading: false,
      // 上拉是否到达最后一页true代表到达最后一页，且onLoad不会再触发了
      finished: false,
      isLoading: false,
      // 是否处理下拉刷新状态 用户下拉时，触发refresh同时isLoading变成true

      SeckillGoods: [
        {
          url: "//img11.360buyimg.com/n7/s150x150_jfs/t1/202026/3/4025/181692/612df831E20cdc5ba/d2678600b33b7bfa.jpg.dpg",
          priceNow: 19.8,
          price: 28.8,
          id: 0,
        },
        {
          url: "//img11.360buyimg.com/n7/s150x150_jfs/t1/200679/35/4743/158946/612f287aE4de8e0e3/210ec898f6a7b768.jpg.dpg",
          priceNow: 189,
          price: 629,
          id: 1,
        },
        {
          url: "//img11.360buyimg.com/n7/s150x150_jfs/t20437/194/1993820603/461976/3760ddb3/5b4308b7N03a19b93.jpg.dpg",
          priceNow: 15.9,
          price: 39.8,
          id: 2,
        },
        {
          url: "//img11.360buyimg.com/n7/s150x150_jfs/t1/190876/40/20824/189572/612c4963E3810d5ec/3b0b88945f938532.jpg.dpg",
          priceNow: 59.9,
          price: 119.9,
          id: 3,
        },
        {
          url: "//img11.360buyimg.com/n7/s150x150_jfs/t1/188049/25/20736/139845/612c81b5E81848c04/cd0d0742e159b221.jpg.dpg",
          priceNow: 59.9,
          price: 198,
          id: 4,
        },
        {
          url: "//img11.360buyimg.com/n7/s150x150_jfs/t1/193030/29/20538/39461/612ddde9E125e0616/d001fe0ed6a99259.jpg.dpg",
          priceNow: 24.9,
          price: 28.8,
          id: 5,
        },             
      ],
      endTime: "2021-9-6 20:00:00",
    };
  },
  created() {
    // 初始化调用
    this.fetchBanner();
    this.fetchCates();
    this.fetchCartInfo()
  },
/* mounted(){
 渲染组件实例dom ，传参将dom绑定到参数指向dom对象 
   组件.$el 获取dom结构

console.log(this.$mount().$el);//拿到整个结构
}, */
  methods: {
    fetchCartInfo(){//获取购物车数据
     fetchCartInfo({
       token:getToken()
     }).then(res => {
       if(res.data.code === 0 ){
         //调用mutation 将仓库中items赋值
         this.$store.commit('cart/set_items', res.data.data.items) //加了命名空间真正的名字是模块名
       }
     })
    },
    addCart(id) {
      /*
        加入购物车
      */
      /* if (!isLogin())  这段可不写 拦截了等于2000自动取登录 前面{
        //  去登录页
        Toast({
          type: "fail",
          duration: 1000,
          message: "请登录之后才加入购物车",
          onClose: () => {
            this.$router.push("/login");
          },
        });
      } else { */
        //  加入购物车
        addCart({
          goodsId: id,
          number: 1,
          token: getToken(), //相当于秘钥
        }).then((res) => {
          if (res.data.code === 0) {
            this.$store.commit('cart/set_items', res.data.data.items) 
            Toast.success("加入购物车成功，请前往购买");
          }
        });
      
    },
    enterDetail(id) {
      // 点击商品进入详情页
      this.$router.push(`/detail/${id}`);
    },
    onRefresh() {
      // 下拉刷新
      /*
       1 将items清空 重新请求第一页数据
       2 将page字段变成1
       3 上拉加载的 finished最后一页重新变成false
      */
      this.page = 1;
      this.finished = false;
      this.items = [];
      /*
        将数据清空后，商品列表没有数据，就没有宽度，
        内容 底部 和 可视区底部 距离应该是负数，小于 给定50
      */
      this.fetchItems();
      this.page++;
    },
    onLoad() {
      // 上拉是否触底
      /*
      事件触发 loading自动变成true
      底部文本 一直显示 加载中
      */
      this.fetchItems();
      // 上拉触底 要加载下一页数据
      this.page++;
    },
    fetchBanner() {
      // 获取首页的banner
      fetchBanner().then((res) => {
        if (res.data.code === 0) {
          this.banners = res.data.data;
        }
      });
    },
    fetchCates() {
      // 请求宫格导航的商品分类
      fetchCates().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data;
          res.data.data.pop();
        }
      });
    },
    fetchItems() {
      // 获取首页的推荐商品
      fetchItems({
        categoryId: 72399,
        page: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.data.code === 700) {
          // 暂无数据 到达最后一页
          this.finished = true;
        }

        //  请求完成时，将加载中（请求数据）状态变成false
        this.loading = false;
        // 下拉刷新完成 将下拉状态变成false
        this.isLoading = false;
        if (res.data.code === 0) {
          this.items = [...this.items, ...res.data.data.result];
        }
      });
    },
  },

  components: {
    Mtabbar,
    HomeHeader,
    Seckill,
    Items,
  
  },
};
</script>

<style lang="scss" scoped>
.my-swipe {
  img {
    width: 95%;
    border-radius: 0.2162rem;
  }
  text-align: center;

  top: -5.4324rem;
}
.van-grid {
  top: -4.7027rem;
  position: relative;
}
</style>
